<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>珠峰培训2017-14JS</title>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="background: #dddddd"></canvas>
</body>
</html>
<script type="text/javascript">
    let canvas=document.getElementById("canvas");
    let draw=canvas.getContext("2d");
    let img=new Image();
    img.src="img/11.png";
    let W=img.width/10;
    let step=0;
    img.onload=function () {
         draw.drawImage(img,0,0,W,312,80,50,W,312);
        // draw.drawImage(img,W*1,0,W,312,80,50,W,312);
        // draw.drawImage(img,W*2,0,W,312,80,50,W,312);
        // draw.drawImage(img,W*3,0,W,312,80,50,W,312);
        // draw.drawImage(img,W*4,0,W,312,80,50,W,312);
        // draw.drawImage(img,W*5,0,W,312,80,50,W,312);
        setInterval(()=>{
            //清屏
            draw.clearRect(0,0,canvas.width,canvas.height);
            step++;
            step==10?step=0:null;
            draw.drawImage(img,W*step,0,W,312,80,50,W,312);
        },100)
    };

</script>